<template>
  <div class="btn-list">
    <img v-if="btnFlag" :src="img1" alt="" class="btn" @click="showFlag = !showFlag" />
    <img
      v-if="listFlag"
      :src="img2"
      alt=""
      :class="[
        'btn',
        'animate__animated',
        showFlag ? 'animate__bounceInRight' : 'animate__bounceOutRight'
      ]"
      @click="showFlag = !showFlag"
    />
    <div
      v-if="listFlag"
      :class="[
        'list',
        'animate__animated',
        showFlag ? 'animate__bounceInRight' : 'animate__bounceOutRight'
      ]"
    >
      <ul>
        <template v-for="(item, i) of list" :key="i">
          <li :class="['item', { 'item-ate': item.active }]" @click="liHandle(i)">
            {{ item.name }}
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import img1 from '@/assets/img/left-control.png'
import img2 from '@/assets/img/right-control.png'

const $props = defineProps({
  list: Array
})
const $emits = defineEmits(['liHandle'])
const showFlag = ref(true)
const listFlag = ref(true)
const btnFlag = ref(false)
watch(
  () => showFlag.value,
  (_new) => {
    console.log(_new)
    if (_new === false) {
      setTimeout(() => {
        listFlag.value = false
        btnFlag.value = true
      }, 300)
    } else {
      btnFlag.value = false
      listFlag.value = true
    }
  }
)
function liHandle(_idx) {
  $emits('liHandle', _idx)
}
</script>

<style scoped lang="less">
.btn-list {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  .btn {
    position: relative;
    top: 50%;
    // left: -60px;
    width: 27px;
    height: 31px;
    transform: translate(0, -50%);
  }
  .list {
    width: 200px;
    background-color: rgba(3, 3, 0, 0.447);
  }
  ul {
    .item {
      width: 100%;
      text-align: center;
      margin-top: 10px;
      line-height: 60px;
      font-size: 18px;
      cursor: pointer;
      &:hover {
        font-weight: 700;
        background-color: #6b6b4c21;
        font-size: 22px;
      }
    }
    .item-ate {
      color: rgb(255, 239, 184);
      font-weight: 700;
    }
  }
}
</style>
<style>
:root {
  --animate-duration: 0s;
  --animate-delay: 0.1s;
}
</style>
